import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../providers/home_list_provider.dart';
import '../../providers/user_provider.dart';
import '../widgets/product_list_item.dart';

// **特性5: ConsumerWidget - 使用 Riverpod 的 Widget**
// 继承自 ConsumerWidget 而不是 StatelessWidget，
// 它的 build 方法会多一个 `WidgetRef ref` 参数。
class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // **特性6: ref.watch - 订阅 Provider**
    // `ref.watch` 会监听 Provider 的变化。当 Provider 的状态更新时，
    // 这个 Widget 会自动重建以显示最新的数据。
    final homeListAsync = ref.watch(homeListProvider);
    // 同样监听 userProvider，当用户名变化时，AppBar 会自动更新。
    final userName = ref.watch(userProvider.select((user) => user.name));

    return Scaffold(
      appBar: AppBar(
        title: Text('你好, $userName'),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () => Navigator.pushNamed(context, '/settings'),
          ),
        ],
      ),
      // **特性7: AsyncValue.when - 优雅处理异步状态**
      // `when` 是处理 AsyncValue (loading, error, data) 的最佳方式，
      // 避免了手写 if/else 判断，代码更清晰、更安全。
      body: RefreshIndicator(
        // **特性8: ref.read - 读取 Provider 的 Notifier**
        // `onRefresh` 是一个回调函数，我们只想触发一个动作，而不想监听变化。
        // 因此使用 `ref.read` 来获取 Notifier 实例，并调用其方法。
        onRefresh: () => ref.read(homeListProvider.notifier).refresh(),
        child: homeListAsync.when(
          loading: () => const Center(child: CircularProgressIndicator()),
          error: (err, stack) => Center(
            child: Text('加载失败: $err'),
          ),
          data: (productList) => ListView.builder(
            itemCount: productList.length,
            itemBuilder: (context, index) {
              // 将列表项的构建逻辑抽离到单独的 Widget 中，保持代码整洁
              return ProductListItem(product: productList[index]);
            },
          ),
        ),
      ),
    );
  }
}
